<template>
  <div class="wrapper activities">
        <div class="activity-card-list">
    <div class="top-title">
        <h4 class="latest">最新活动</h4>
        <div class="cities">
            <span class="sui-dropdown dropdown-bordered select">
                <span class="dropdown-inner">
                    <a id="drop12" role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <input value="hz" name="city" type="hidden"><i class="caret"></i><span>全部城市</span>
                    </a>
                    <ul id="menu12" role="menu" aria-labelledby="drop12" class="sui-dropdown-menu">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="bj">北京</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb">成都</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb">广州</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb">深圳</a></li>
                        
                    </ul>
                </span>
            </span>
        </div>
        <div class="types">
            <span class="sui-dropdown dropdown-bordered select">
                <span class="dropdown-inner">
                    <a id="drop12" role="button" data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <input value="hz" name="city" type="hidden"><i class="caret"></i><span>所选类型</span>
                    </a>
                    <ul id="menu12" role="menu" aria-labelledby="drop12" class="sui-dropdown-menu">
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="bj">全部类型</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb">线下活动</a></li>
                        <li role="presentation"><a role="menuitem" tabindex="-1" href="javascript:void(0);" value="sb">线上活动</a></li>                        
                    </ul>
                </span>
            </span>
        </div>
        <div class="clearfix"></div>
    </div>
    <!-- 瀑布流分页触发 -->
    <div class="activity-list" v-infinite-scroll="loadMore">
        <ul class="activity">
            
            <li class="activity-item" v-for="(item,index) in items" :key="index">
                <div class="activity-inner"> 
                    <a href="http://"></a> 
                    <div class="img">
                    <a :href="'/gathering/item/'+item.id" target="_blank"><img :src="item.image" alt="" /></a>
                    </div> 
                    <div class="text"> 
                    <p class="title">{{item.name}}</p> 
                    <div class="fl goin"> 
                    <p>时间：{{item.starttime}}</p> 
                    <p>城市：{{item.city}}</p> 
                    </div> 
                    <div class="fr btn"> 
                    <span class="sui-btn btn-bao" v-if="item.state===1">立即报名</span> 
                     <span class="sui-btn btn-bao" v-if="item.state===2">报名已结束</span> 
                      <span class="sui-btn btn-bao" v-if="item.state===3">活动进行中</span> 
                    </div> 
                    <div class="clearfix"></div> 
                    </div> 
                </div>
            </li>
        </ul>
    </div>
</div>       
    </div>
</template>
<script>
import '~/assets/css/page-sj-activity-index.css'
import gatheringApi from '@/api/gathering'
export default {
    data(){
        return {
            pageNo:1,
            pageSize:12
        }
    },
    asyncData () { //nuxt中默认获取数据的函数
        return gatheringApi.search(1,12,{})
           .then( res => {
                return { items: res.data.data.rows }
           })
    },
    methods:{
        loadMore(){ //瀑布流分页事件
            this.pageNo ++ 
            gatheringApi.search(this.pageNo,this.pageSize,{}).then(res =>{
                //将返回的结果集追加在items的后面
                this.items = this.items.concat(res.data.data.rows)
            })
        }
    }
}
</script>